import React, { useState, useEffect, useImperativeHandle, forwardRef } from 'react'
import axios from 'axios'
import url from '../api/url'
export default forwardRef(function Captcha(props, ref) {

    // let [captcha, setCaptcha] = useState("")//用户输入的用于核对的验证码
    let [img, setImg] = useState("") //图片验证码
    const getCode = () => {
        axios.get(url.captcha).then((res) => {
            props.setKey(res.data.key);  //子组件调用父组件的方法，目的是让密码登录组件拿到key 
            setImg(res.data.img);
        })
    }
    useEffect(() => {
        //请求图片验证码
        getCode()
    }, [])
    useImperativeHandle(ref, () => {
        return {
            getCode  //暴露这个方法给父组件调用，目的是，父组件登录失败的时候，调用这个方法可以重新生成验证码
        }
    })
    return (

        <img src={img} width="130" height="30" onClick={getCode} alt='' />

    )
})
